<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>同步微单页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<!--ios是否运行创建快捷启动方式-->
		<meta content="yes" name="apple-mobile-web-app-capable">
		<!--ios顶部通知栏的样式 黑色-->
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<!--遇到数字不让转成电话号码格式-->
		<meta content="telephone=no" name="format-detection">
		<script src="js/remstyle.js"></script>
		<link rel="stylesheet" href="assets/mui/css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="common/css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/min_page.css" />
		<link rel="stylesheet" type="text/css" href="css/sameInfo.css" />
		<script src="js/config.js"></script>
		<script src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="layer/layer.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>

	</head>
	<style>
		[v-cloak] {
			display: none;
		}
	</style>

	<body>
		<!--顶部-->
		<div class="mui-scroll">
			<!--顶部-->
			<div class="top">
				<div class="top-one">
					<span id="top-one"><img src="img_page/right.png"/></span>
				</div>
				<div class="top-two " style="opacity: 0;">
					<span><img src="img_page/search.png"/></span>
					<span><input type="" name="" id="" placeholder="请输入关键字" /></span>
				</div>
				<div class="three_point">
					<img src="img_page/3point.png" />
				</div>
			</div>
			<!--功能列表-->
			<div id="mytype">
				<div class="type_list">
					<div class="page_type" v-cloak v-for="v in list" @click="go_type(v.id)">
						<div class="page_type_img"><img v-bind:src="v.src" /> </div>
						<span>{{v.name}}</span>
					</div>
				</div>
			</div>
			<!--文件-->
			<div class="all_files">
				<div class="files_type" v-cloak v-for="(tab,index) in tabsName" v-bind:class="{active:tab.isActive}" @click="tabsSwitch(index)">
					<img class="files_type_img" :src="tab.img" />
					<span>{{tab.file_name}}</span>
				</div>

			</div>
			<!--隐藏部分-->
			<!--<div class="all_files_a">
				<div class="files_type_a" v-cloak v-for="(tab,index) in tabsName"  @click="tabsSwitch(index)">
					<span style="width: 2.1rem;height:100%;display: inline-block;" v-bind:class="{active:tab.isActive}">{{tab.file_name}}</span>
				</div>

			</div>-->
			<!--文件夹列表-->
			<div class="files_list ">

				<!--同步文件夹-->
				<div class="tab_con " style="display:block ">

					<div class="files_list_con ">
						<span class="files_list_title ">同步的文件夹（{{list_num}}）</span>
						<div class="files_list_info " id="file_type " v-cloak v-for='(v,index) in files'>
							<img v-if='index<5' class="files_list_info_img" src="img_page/all_files.png" @click="synchronization(v.type_id)" />
							<img v-if='index==5' class="files_list_info_img" src="img_page/more_files.png" @click="tb_more()" />
							<span v-if='index<5' id="file_type_name ">{{v.type_name}}</span>
							<span v-if='index==5' id="file_type_name ">更多</span>
						</div>
					</div>
				</div>
				<!--个人文件夹-->
				<div class="tab_con ">

					<div class="person_list_con ">
						<div class="files_list_title ">我的文件夹（{{list_num}}）
							<span style="float: right;margin-right:3%;color: #0e7bce;cursor: pointer;" onclick="my_admin()">管理</span>
						</div>
						<!--<div class="files_list_info " id="file_type " onclick="oneKey()">
							<img class="files_list_info_img" src="img_page/all_files.png" />
							<span id="file_type_name ">文件</span>
						</div>-->
						<div class="files_list_info " id="file_type " v-cloak v-for='(v,index) in files'>
							<img v-if='index<4' class="files_list_info_img" src="img_page/all_files.png" @click="person_file_details(v.type_id)" />
							<img v-if='index==4' class="files_list_info_img" src="img_page/more_files.png" @click="person_more()" />
							<span v-if='index<4' id="file_type_name ">{{v.type_name}}</span>
							<span v-if='index==4' id="file_type_name ">更多</span>
						</div>
					</div>
				</div>
			</div>
			<!--置顶的单页-->
			<div class="files_top">
				<span class="files_list_title">置顶的单页</span>
				<div class="page_list ">
					<div class="page_list_con " v-cloak v-for='v in page_list' @click="top_page_details(v.id)" :data-id="v.id">
						<div class="page_list_con_left ">
							<span>{{v.title}}</span>
							<img src="img_page/page_top.png " /></div>
						<div class="page_list_con_right ">
							<img :src="v.img_url " />

						</div>
					</div>
					<div class="all_page " @click="top_more()">查看全部</div>
				</div>

			</div>

			<span class="files_list_title ">我的单页</span>
			<div class="my_page_scroll">
				<div class="my_page ">
					<div class="page_list_con " v-cloak v-for='v in my_page' @click="page_details(v.id)" :data-id="v.id">
						<div class="page_list_con_left ">
							<span>{{v.title}}</span>
							<span v-if="v.title==''">这里是标题</span>
							<img v-if="v.roof_placement==1" src="img_page/page_top.png " /></div>
						<div class="page_list_con_right ">
							<img :src="v.img_url " />

						</div>

					</div>
					<div class="list_no_more">---- 没有更多了 ----</div>
					<!--<div class="all_page ">查看全部</div>-->
				</div>
			</div>

			<!--底部新建单页-->
			<div class="min_page_bottom">
				<button class="new_page_btn" style="border:none;background:#1f8ff3;text-decoration:none;cursor:pointer;" onclick="new_page()">
					<img src="img_page/new_page_img.png" />
					<span>新建单页</span>
				</button>
			</div>
			<div class="go_page_top" id="return-top">
				<img src="img_page/go_top.png" />
			</div>
		</div>

	</body>
	<script type="application/javascript " src="js/jquery-1.7.2.min.js "></script>
	<script>
		if(getCookieValue("token") == "") {
			window.location.href = 'l-userlogin.html'
		}
		function oneKey(){
				window.location.href = "onekey.html?c_user_id=" + c_user_id;
			};

		$('#top-one').on('click', function() {
			window.location.href = "g-center.html?business=" + c_user_id;
		});
		$(function() {
			$('#return-top').hide();
			$(function() {
				$(window).scroll(function() {
					if($(window).scrollTop() > 300) {
						$('#return-top').fadeIn(300);
					} else {
						$('#return-top').fadeOut(200);
					}

				});
				$('#return-top').click(function() {

					$('body,html').animate({
						scrollTop: 0
					}, 300);
					return false;

				})

			})

		})
		function my_admin() {
			window.location.href = 'personal_files.html?c_user_id=' + c_user_id;
		}

		function new_page() {
			window.location.href = 'min_page_add.html?c_user_id=' + c_user_id;
		}
		var all_type = new Vue({
			el: '#mytype',
			data: {
				list: [{
						id: '1',
						src: 'img_page/key_toImport.png',
						name: '一键导入'
					}, {
						id: '2',
						src: 'img_page/connect.png',
						name: '收藏夹'
					},
					{
						id: '3',
						src: 'img_page/share.png',
						name: '置顶列表'
					},
					{
						id: '4',
						src: 'img_page/page_material.png',
						name: '素材管理'
					}, {
						id: '5',
						src: 'img_page/type_ad.png',
						name: '设置广告'
					}

				]

			},
			methods: {
				go_type: function(id) {
					if(id == 1) {
						window.location.href = 'import_page.html?c_user_id=' + c_user_id;
					}
					if(id == 2) {
						window.location.href = 'collect_list.html?c_user_id=' + c_user_id;
					}
					if(id == 3) {
						window.location.href = 'top_page.html?c_user_id=' + c_user_id;
					}
					if(id == 4) {
						window.location.href = 'material_manage.html?c_user_id=' + c_user_id;
					}
					if(id == 5) {
						window.location.href = 'material_advertising.html?c_user_id=' + c_user_id;
					}
				},
				
			},
			
			
		});
		var all_files = new Vue({
			el: '.all_files',
			data: {
				tabsName: [{
					img: 'img_page/Sync_files.png',
					file_name: "同步文件 ",
					isActive: true
				}, {
					img: 'img_page/Personal_files.png',
					file_name: "个人文件 ",
					isActive: false
				}],
				active: false
			},
			methods: {

				tabsSwitch: function(tabIndex) {
					//console.log(tabIndex, 888)
					if(tabIndex == 1) {
						$(".files_top ").hide();
					} else {
						$(".files_top ").show();
					}
					var tabCardCollection = document.querySelectorAll(".tab_con "),
						len = tabCardCollection.length;
					for(var i = 0; i < len; i++) {
						tabCardCollection[i].style.display = "none ";
						this.tabsName[i].isActive = false;
					}

					this.tabsName[tabIndex].isActive = true;
					tabCardCollection[tabIndex].style.display = "block ";
				}
			}
		})
		//		var all_files_a = new Vue({
		//			el: '.all_files_a',
		//			data: {
		//				tabsName: [{
		//
		//					file_name: "同步文件 ",
		//					isActive: true
		//				}, {
		//
		//					file_name: "个人文件 ",
		//					isActive: false
		//				}],
		//				active: false
		//			},
		//			methods: {
		//				tabsSwitch: function(tabIndex) {
		//					console.log(tabIndex)
		//					if(tabIndex == 1) {
		//						$(".files_top ").hide();
		//					} else {
		//						$(".files_top ").show();
		//					}
		//					var tabCardCollection = document.querySelectorAll(".tab_con "),
		//						len = tabCardCollection.length;
		//					for(var i = 0; i < len; i++) {
		//						tabCardCollection[i].style.display = "none ";
		//						this.tabsName[i].isActive = false;
		//					}
		//					this.tabsName[tabIndex].isActive = true;
		//					tabCardCollection[tabIndex].style.display = "block ";
		//				}
		//			}
		//		})
		var files_list = new Vue({
			el: '.files_list_con',
			data: {
				files: [],
				list_num: '0'
			},
			created: function() {
				this.getList();
			},
			methods: {
				getList: function() {
					console.log("11111");
					var that = this;
					$.ajax({
						type: "get",
						url: v_url + "/wechat/singlepage/getMyFileList",
						data: {
							source: '0',
							c_user_id: c_user_id
						},
						async: true,
						success: function(res) {
							var list = res.data;

							that.files = list
							console.log(that.files, 8888888);
							var list_num = list.length
							that.list_num = list_num
							//console.log(list_num);
						}
					});

				},
				tb_more: function() {
					window.location.href = 'all_files_tb.html?c_user_id=' + c_user_id;
				},
				synchronization: function(type_id) {
					window.location.href = 'personal_file_list.html?url=' + type_id + '&c_user_id=' + c_user_id
				}

			}
		})
		var person_list = new Vue({
			el: '.person_list_con',
			data: {
				files: [],
				list_num: '0'
			},
			created: function() {
				this.getList();
			},
			methods: {
				getList: function() {
					console.log("11111");
					var that = this;
					$.ajax({
						type: "get",
						url: v_url + "/wechat/singlepage/getMyFileList",
						data: {
							source: '1',
							c_user_id: c_user_id
						},
						async: true,
						success: function(res) {
							var list = res.data;
							that.files = list
							//console.log(that.files);
							var list_num = list.length
							that.list_num = list_num
							console.log(list_num);
						}
					});

				},
				person_more: function() {
					window.location.href = 'personal_files.html?c_user_id=' + c_user_id;
				},
				person_file_details: function(type_id) {
					window.location.href = 'personal_file_list.html?url=' + type_id + '&c_user_id=' + c_user_id
				}

			}
		})
		var page_list = new Vue({
			el: '.page_list',
			data: {
				page_list: []
			},
			created: function() {
				this.getList();
			},
			methods: {
				getList: function() {
					console.log("11111");
					var that = this;
					$.ajax({
						type: "get",
						url: v_url + "/wechat/singlepage/getTopPageList",
						data: {
							pages: that.pages,
							rows: '10',
							c_user_id: c_user_id
						},
						async: true,
						success: function(res) {
							var list = res.data;
							that.page_list = list
							console.log(that.page_list, "jskdjs");

						}
					});

				},
				top_more: function() {
					window.location.href = "top_page.html?c_user_id=" + c_user_id
				},
				top_page_details: function(id) {
					window.location.href = "page_text_details.html?url=" + id + '&c_user_id=' + c_user_id

				}

			}
		})
		var my_page = new Vue({
			el: '.my_page',
			data: {
				my_page: [],
				page: 1
			},
			created: function() {
				this.getList();
				window.addEventListener('scroll', this.onScroll);
			},
			methods: {
				onScroll: function() {
					//可滚动容器的高度
					var that = this;
					let innerHeight = document.querySelector('.my_page_scroll').clientHeight; //屏幕尺寸高度
					let outerHeight = document.documentElement.clientHeight; //可滚动容器超出当前窗口显示范围的高度
					var scrollTop;
					if(typeof window.pageYOffset != 'undefined') { //pageYOffset指的是滚动条顶部到网页顶部的距离
						scrollTop = window.pageYOffset;
					} else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
						scrollTop = document.documentElement.scrollTop;
					} else if(typeof document.body != 'undefined') {
						scrollTop = document.body.scrollTop;
					}
					//console.log(innerHeight + " " + outerHeight + " " + scrollTop);
					if(innerHeight < (outerHeight + scrollTop)) { //加载更多操作
						console.log("加载中");
						//this.items += 10;

						that.page = ++that.page
						that.getList()
						//layer.closeAll();
					}
				},
				getList: function() {
					console.log("11111");

					var that = this;
					layer.load("加载中");
					$.ajax({
						type: "get",
						url: v_url + "/wechat/singlepage/getMyPageList",
						data: {
							page: that.page,
							rows: '10',
							c_user_id: c_user_id
						},
						async: true,
						success: function(res) {
							var list = res.data;
							//that.my_page = list
							console.log(list.length, "jskdjs");
							layer.closeAll();
							var new_my_page = [];
							new_my_page = that.my_page;
							if(list && list.length != 0) {
								for(var i = 0; i < list.length; i++) {
									new_my_page.push(list[i]);
								}
								that.my_page = new_my_page
								console.log(new_my_page);
								if(list.length < 10) {

								}
							}

						}
					});

				},
				page_details: function(id) {
					window.location.href = "page_text_details.html?url=" + id + '&c_user_id=' + c_user_id

				}
			}

		})
	</script>

</html>